var overlayDom = document.getElementById('overlayChart');
var overlayChart = echarts.init(overlayDom);
var overlayData = {
        legend: ['准时还款率', '坏账率'],
        xAxis: ['五月', '六月', '七月', '八月', '九月', '十月'],
        data: [97,95, 92, 98, 95, 93],
        count: [3, 5, 8, 2, 5, 7]
}
var overlayOption = {
    legend: {
        data: overlayData.legend
    },
    tooltip: {
      trigger: 'axis',
      formatter: function(vm){
          var title = vm[0].name;
          var good = vm[0].value + '%';
          var bad = vm[1].value + '%';
          return title + '<br>' + '准时还款率: ' + good + '<br>' + '坏账率: '+ bad
      },
      axisPointer: {
        type: 'shadow' 
      }
    },
    color,
    grid: {
      top: 50,
      left: '2%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: overlayData.xAxis,
      axisLabel: {
        rotate : 20
      },
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value',
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value} %'
      }
    }],
    series: [{
      name: overlayData.legend[0],
      type: 'bar',
      stack: 'repayment',
      barWidth: '30%',
      data: overlayData.data,
      animationDuration: 3000,
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
    },{
        name: overlayData.legend[1],
        type: 'bar',
        stack: 'repayment',
        barWidth: '30%',
        data: overlayData.count,
        animationDuration: 3000,
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5;
        }
      }]
  }

overlayChart.setOption(overlayOption)